<template>
  <view class="project-list">
    <top-data
      :title="CPROGRAMNAME"
      :list="projectInfo"
    />
    <view v-if="childrenTableInfos.length" class="project_tabs">
      <Vue-Tabs-Swipe
        :value="tabCurrent"
        tab-font-weight="600"
        :tab-slider-width="50"
        border-bottom
        touch-animation
        @change="e => tabChange(e)"
      >
        <view
          v-for="(tab, index) in childrenTableInfos"
          :key="index"
          class="tabs-item"
          :tab-label="tab.tableName"
        >
          <table-report
            :table-id="tab.id"
            :item-tab="tab"
          />
        </view>
      </Vue-Tabs-Swipe>
    </view>
  </view>
</template>

<script>
import TopData from '@/pages/analysis/components/TopData.vue';
import VueTabsSwipe from 'vue-tabs-swiper';
import { Message } from '@/utils/utils';
import TableReport from '@/pages/analysis/components/TableReport.vue';
import { queryHeaderByMenuId } from '@/api/formview';
export default {
  name: 'ProjectList',
  components: {
    TopData,
    VueTabsSwipe,
    TableReport
  },
  data() {
    return {
      CPROGRAMNAME: '',
      projectInfo: [],
      CENTERPRISECODE1: '',
      menuId: undefined,
      title: '',
      tabCurrent: 0,
      childrenTableInfos: [
      ]
    };
  },
  async created() {
    this.getRouteParams();
    await this.getTabs();
  },
  methods: {
    getRouteParams() {
      console.log(this.$route.query);
      const { CENTERPRISECODE1, CPROGRAMNAME, YSS, ZCS, ZXL, menuId, title } = this.$route.query;
      this.projectInfo = [
        { name: '总预算数', num: YSS },
        { name: '总支付数', num: ZCS },
        { name: '执行率', num: ZXL + '%' }
      ];
      this.CENTERPRISECODE1 = CENTERPRISECODE1;
      this.CPROGRAMNAME = CPROGRAMNAME;
      this.menuId = menuId;
      this.title = title;
      // const { title, menuId, ENTERPRISENAME, CENTERPRISECODE1 } = this.$route.query
    },
    tabChange(e) {
      console.log(e);
    },
    async getTabs() {
      const { data, success, message } = await queryHeaderByMenuId({ menuId: this.menuId });
      if (success) {
        this.childrenTableInfos = data.childrenTableInfos.filter(item => item.display).sort((a, b) => a.orderId - b.orderId);
      } else {
        this.childrenTableInfos = [];
        Message(message);
      }
    },
    addBtn(item) {
      return item.buttons && item.buttons.length && item.buttons.some(v => v.buttonCode === 1);
    }
  }
};
</script>

<style lang="less" scoped>
.project-list{
  height: 100vh;
  width: 100vw;
  background-color: #1492FF;
  .top_data{
    height: 115px;
  }
  .project_tabs{
    height: calc(100% - 115px);
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    padding-top: 10px;
    overflow: auto;
    .xtt-tabs-swiper{
      height: 100%;
      /deep/.tabs-content{
        overflow: auto;
        height: calc(100% - 44px);
      }
    }
    .tabs-item{
      height: 100%;
    }
  }
}
</style>
